// 入口文件
// import "./css/preview.css";


import Vue from "vue";

import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 按需导入 mint-ui 里的组件

import mt from 'mint-ui';
Vue.use(mt);
import "mint-ui/lib/style.min.css";
// Vue.component(Header.name, Header);

//import "./lib/dist/fonts/mui.ttf";
//import "./lib/dist/fonts/mui-icons-extra.ttf";

import "./lib/dist/css/mui.min.css";
import "./lib/dist/css/icons-extra.css";  // 三个包的导入顺序相当重要  顺序不同可能导致很大的差别
import "./lib/dist/css/app.css";


// 引入懒加载插件
import VueLazyLoad from "vue-lazyload";
// 挂载
Vue.use(VueLazyLoad, {
    error: "./img/01.jpg",
    loading: "./img/02.jpg"

})


import VueResource from "vue-resource";
Vue.use(VueResource);

// 更改 vue-resource 的配置  设置请求根路径
Vue.http.options.root = "http://www.liulongbin.top:3005";
// 全局设置 post 请求时的表单数据格式组织形式  application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true;

import router from './router.js';

// 导入 时间格式插件
import moment from "moment";

// 定义全局过滤器
Vue.filter('dataFormat', function(dataStr, pattern = "YYYY-MM-DD hh:mm:ss") {
    return moment(dataStr).format(pattern);
})

// 安装导入缩略图插件
import VuePreview from "vue-preview";
Vue.use(VuePreview);

// 导入 vuex
import Vuex from "vuex";
Vue.use(Vuex);


// 每次进入网站 肯定会调用  main.js  在调用的时候  先从本地存储中，把 购物车的数据读取出来
var car = JSON.parse(localStorage.getItem('car') || '[]');

var store = new Vuex.Store({
    state: {  // this.$store.state.xxx
        car: car,  // 将购物车中商品的数据，用一个数组存储起来，在car数组中存储一些商品的对象，目前设置商品对象为{ id: 商品的id, count: 要买的数量, price: 商品的单价, selected: false(是否选中)}
        // count: 0,
    },
    mutations: {  // this.$store.commit("方法名称","按需传递唯一的参数")
        addToCar(state,goods) {
            // 点击加入购物车，把商品信息，保存到 store 中的 car上
            // 分析
            // 1、如果购物车中本身含有这个对应的商品，那么，只需要更新数量
            // 2、如果没有，则直接把商品数据push 到 car 中即可

            // 标识符
            var flag = false;
            
            state.car.some(item=> {
                if(item.id == goods.id) {
                    item.count = item.count + parseInt(goods.count);
                    flag = true;
                    
                    return true;
                }
            })
            if(!flag) {
                state.car.push(goods);
            }
            // state.count += parseInt(goods.count);

            // 当 更新 car 之后  把 car 数组  存储到  本地的  localStorage 中
            localStorage.setItem('car',JSON.stringify(state.car));
        },
        updateGoodsinfo(state,goods) {
            state.car.some(item=> {
                if(item.id == goods.id) {
                    item.count = parseInt(goods.count);
                    return true;
                }
            })

            localStorage.setItem("car", JSON.stringify(state.car));
        },
        removeFromCar(state, id) {
            // 根据 id  从 store 中删除对应的那条数据
            state.car.some((item, i) => {
                if(item.id == id) {
                    state.car.splice(i, 1);
                    return true;
                }
            });

            localStorage.setItem("car", JSON.stringify(state.car));

        },
        updategoodsSelected(state, info) {
            state.car.some(item => {
                if(item.id == info.id) {
                    item.selected = info.selected;
                }
            });

            localStorage.setItem("car", JSON.stringify(state.car));
        }
        
    },
    getters: {   //  this.$store.getters.xxx
      // 相当于 计算属性  也相当于 filter
      getAllCount(state) {
          var c = 0;
          state.car.forEach(item => {
              c += item.count;
          })
          return c;
      },
      getGoodsCount(state) {
            var o = {};
            state.car.forEach(item => {
                o[item.id] = item.count;
            });
            return o;
        },
      getGoodsSelected(state) {
            var o = {};
            state.car.forEach(item=>{
                o[item.id] = item.selected;
            })
            return o;
        },
      getGoodsCountAndAmount(state) {
          var o = {
              count: 0,  // 勾选的数量
              amount: 0  // 勾选的总计
          };
          state.car.forEach(item => {
              if(item.selected) {
                  o.count += item.count;
                  o.amount += item.price * item.count;
              }
          })

          return o;
      }
    }
})

import app from "./app.vue";

var vm = new Vue({
    el: "#app",
    data: {},
    render: c => c(app),
    router,
    store, // 挂载 store 状态管理对象
})